<template>
  <div>
    <!-- 费用报销 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-button type="primary" size="medium" @click="AddReimbursement" style="margin-left:30px; margin-top:15px;">新建申请</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark-two">
                     <el-form :inline="true" ref="form" :model="form" label-width="100px" style="padding-top:20px">
                          <el-form-item label="发起人">
                            <el-input v-model="form.tuser.nickName" placeholder="请输入"></el-input>
                          </el-form-item>
                          <el-form-item label="状态">
                            <el-select v-model="form.status" placeholder="请选择">
                              <el-option label="全部" value=""></el-option>
                              <el-option label="申请中" value="1"></el-option>
                              <el-option label="已同意" value="2"></el-option>
                              <el-option label="已拒绝" value="3"></el-option>
                              <el-option label="已撤销" value="4"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="报销类别">
                            <el-select v-model="form.expenseType" placeholder="请选择">
                              <el-option label="全部" value=""></el-option>
                              <el-option label="差旅报销" value="1"></el-option>
                              <el-option label="日常报销" value="2"></el-option>
                            </el-select>
                          </el-form-item>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <el-button type="primary" @click="getSalaryCalculate"> 搜索 </el-button>
                          &nbsp;
                          <el-button @click="resetQuery">重置</el-button>
                          <el-form-item label="发起时间">
                            <el-date-picker
                              v-model="daterange1"
                              type="daterange"
                              value-format="yyyy-MM-dd"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="完结时间">
                            <el-date-picker
                              v-model="daterange2"
                              value-format="yyyy-MM-dd"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
                            </el-date-picker>
                          </el-form-item>
                     </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark-three">
                      <el-table :header-cell-style="{background: '#f4f4f4'}"  v-loading="loading" :data="tableData" border style="width: 97%;position: relative;top:20px;left:20px;">
                        <el-table-column fixed prop="id" label="流水号" width="180"></el-table-column>
                        <el-table-column prop="tuser.nickName" label="发起人" width="120"></el-table-column>
                        <el-table-column prop="expenseMoney" label="借款金额" width="120"></el-table-column>
                        <el-table-column prop="paidMoney" label="借款余额" width="150"></el-table-column>
                        <el-table-column prop="remark" label="备注" width="180"></el-table-column>
                        <el-table-column prop="endTime" label="完结时间" width="180"></el-table-column>
                        <el-table-column prop="status" label="状态" width="150">
                           <template slot-scope="scope">
                            <el-tag size="medium" v-if="scope.row.status==1" >审批中</el-tag>
                            <el-tag size="medium" type="success" v-if="scope.row.status==2" >已同意</el-tag>
                            <el-tag size="medium" type="info" v-if="scope.row.status==4" >已撤销</el-tag>
                            <el-tag size="medium"  type="danger" v-if="scope.row.status==3" >已拒绝</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column
                          fixed="right"
                          label="操作"
                          width="150">
                          <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" >详情</el-button>
                            <el-button type="text" v-if="scope.row.status==1" @click="updateStatus2(scope.row)">同意</el-button>
                            <el-button type="text" v-if="scope.row.status==1" @click="updateStatus1(scope.row)">拒绝</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                       <div class="block">
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[5, 10, 20, 50]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                          >
                          </el-pagination>
                        </div>
                </div>
            </el-col>
        </el-row>                     
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
          loading:true,
        form:{
          tuser:{
            nickName:"",
          },
          status:"",
          expenseType:"",
          startDate:"",
          endDate:"",
          startDateTwo:"",
          endDateTwo:"",
          moneyType:"2",
          approver:""
        },
        daterange1:[],
        daterange2:[],
        tableData:[],
        pageNum: 1,
        pageSize: 5,
        total: 0,

        }
    },
    created(){
      this.getSalaryCalculate();
      
    },
    methods: {
      //跳转到详情页
      handleEdit(index, row) {
        console.log(index, row);
        this.$router.push({path: '/ReimbursementById',query:{ id:row.id}})
      },
       //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSalaryCalculate();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getSalaryCalculate();
      },
      getSalaryCalculate(){
        var a=JSON.parse(localStorage.getItem("user"))
        this.form.approver=a.id
        var dateRange3=this.daterange1.length
        var dateRange4=this.daterange2.length
        if (dateRange3> 0) {
          this.form.startDate=this.daterange1[0];
          this.form.endDate=this.daterange1[1];
       }
       if (dateRange4> 0) {
          this.form.startDateTwo=this.daterange2[0];
          this.form.endDateTwo=this.daterange2[1];
       }
       console.log("结束时间"+this.form.startDateTwo+"/"+this.form.endDateTwo)
         axios.post("ExpenseAccount/findExpenseAccountFenYe?pageNum="+this.pageNum+"&pageSize="+this.pageSize, this.form)
        .then((res) => {
              this.tableData = res.data.rows;
               console.log(this.data)
                this.total = res.data.total;
                this.loading=false;
          });
       
      },
      resetQuery(){
        this.form.tuser.nickName="";
        this.form.status="";
        this.form.expenseType="";
        this.form.startDate="";
        this.form.endDate="";
        this.form.startDateTwo="";
        this.form.endDateTwo="";
        this.daterange1="";
        this.daterange2="";
        this.getSalaryCalculate();
      },
      AddReimbursement(){
        this.$router.push("/AddBorrowMoney"); //添加
      },
       //    拒绝
      updateStatus1(row){
        row.status=3
        axios
          .post("ExpenseAccount/updateExpenseAccountStatus", row)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "已拒绝，" + res.data.msg,
                type: "success",
              });
              this.getSalaryCalculate();
            } else {
              this.$message.error("错了哦，" + res.data.msg);
            }
          });
      },
      
      //  同意
      updateStatus2(row){
        row.status=2
        axios
          .post("ExpenseAccount/updateExpenseAccountStatus", row)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "恭喜你，" + res.data.msg,
                type: "success",
              });
              this.getSalaryCalculate();
            } else {
              this.$message.error("错了哦，" + res.data.msg);
            }
          });
      },
    }

}
</script>

<style scoped> 
.block{
  padding-left: 800px;
  padding-top: 30px;
}
 .el-row {
    margin-bottom: 20px;
  
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height:70px;
  }
    .bg-purple-dark-two {
    background: white;
    height:150px;
  }
    .bg-purple-dark-three {
    background: white;
    height:500px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    
  }
</style>